<script setup lang="ts">
import {throttle} from "@/utils";
import {getProductDetailByIdServer} from "@/api/product";

const {params} = useRoute();
const {id} = params;
const tabList = ref([
  {
    label: '产品介绍',
    value: '1'
  }, {
    label: '智能应用',
    value: '2'
  },
  {
    label: '场景架构图',
    value: '3'
  },
  {
    label: '产品优势',
    value: '4'
  }
])
const currentTab = ref(tabList.value[0].value)
const positionMode = ref('sticky')
const productDetailPage = ref({
  productApplyList: []
})

const getProductDetail = async () => {
  const {data} = await getProductDetailByIdServer(id)
  if (data === null) {
    location.replace("/404");
  }
  productDetailPage.value = data
}
const setCurrentTabHandle = (val: { value: string; }) => {
  currentTab.value = val.value
  scrollTo()
}
const tab2DomTop = ref(0)
const tab3DomTop = ref(0)
const tab4DomTop = ref(0)
const scrollTo = () => {
  const pageHeight = document.body.clientHeight;

  let R = 0
  switch (currentTab.value) {
    case '1':
      R = 0.1142
      break
    case '2':
      R = tab2DomTop.value/pageHeight+0.01
      break
    case '3':
      R =tab3DomTop.value/pageHeight
      break
    case '4':
      R = tab4DomTop.value/pageHeight
      break
  }

  window.scroll({
    top: pageHeight * R,
    left: 0,
    behavior: 'smooth'
  });
};
const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const pageHeight = document.body.clientHeight;
  let tab2DomTop = document.querySelector('.ht-product-detail-part2')!.getBoundingClientRect().y
  let tab3DomTop = document.querySelector('.ht-product-detail-part3')!.getBoundingClientRect().y
  let tab4DomTop = document.querySelector('.ht-product-detail-part4')!.getBoundingClientRect().y
  let tabDomHeight = document.querySelector('.ht-product-detail-tab')!.getBoundingClientRect().height * 1.15
  let tabNormalTop = tab4DomTop - tabDomHeight

  const R = scrollTop / pageHeight
  const I = tabList.value
  if (tab2DomTop > 10) {
    currentTab.value = I[0].value
  }
  if (tab2DomTop < 30 && tab3DomTop > 90 && tabNormalTop > 10) {
    currentTab.value = I[1].value
  }

  if (tab3DomTop < 90 && tabNormalTop > 50) {
    currentTab.value = I[2].value
  }

  if (tabNormalTop < 50) {
    currentTab.value = I[3].value
  }
  // tab free
  if (R > 0.7995) {
    positionMode.value = 'static'
  } else {
    positionMode.value = 'sticky'
  }
};

const T = throttle(handleScroll, 30)
getProductDetail()

onActivated(() => {
  setTimeout(() => {
    let tabDomHeight = document.querySelector('.ht-product-detail-tab')!.getBoundingClientRect().height * 1.15
    let t2 = document.querySelector('.ht-product-detail-part2')!.getBoundingClientRect().y
    let t3 = document.querySelector('.ht-product-detail-part3')!.getBoundingClientRect().y
    let t4 = document.querySelector('.ht-product-detail-part4')!.getBoundingClientRect().y-tabDomHeight
    tab2DomTop.value = t2
    tab3DomTop.value = t3
    tab4DomTop.value = t4
    window.addEventListener('scroll', T);
  }, 400)
});
onDeactivated(() => {
  window.removeEventListener('scroll', T);
})
</script>
<template>
  <div class="ht-product-detail">
    <Head>
      <Title>{{ productDetailPage.title || '产品详情' }}</Title>
    </Head>
    <div class="ht-product-detail-top" :style="{backgroundImage:`url(${productDetailPage.productBannerImage})`}">
      <div class="title">{{ productDetailPage.title }}</div>
      <div class="subtitle">{{ productDetailPage.subsidiaryTitle }}</div>
    </div>
    <div class="ht-product-detail-tab" :style="{position:positionMode}">
      <div class="tab-item" :class="currentTab===t.value?'active':''" v-for="(t,i) in tabList" :key="i"
           @click="setCurrentTabHandle(t)">
        <span>{{ t.label }}</span>
        <img class="normal" src="~/assets/images/product/detail/tab-to-bottom.png">
        <img class="selected" src="~/assets/images/product/detail/tab-selected.png">
      </div>
    </div>
    <div class="ht-product-detail-box">
      <div class="ht-product-detail-item ht-product-detail-part1">
        <div class="part1-image">
          <img :src="productDetailPage['productImage']" alt="">
        </div>
        <div class="part1-content">
          <div class="describes">
            <div class="title">
              <span>{{ productDetailPage['title'] || '' }}</span>
              <br/>
              <span class="sub"> {{ productDetailPage['subsidiaryTitle'] || '' }}</span>
            </div>
            <div class="description" v-html="productDetailPage['intro']||''">
            </div>
          </div>
          <div class="list">
            <div class="item" v-for="item in productDetailPage['productFeatureList']" :key="item.id">
              <div class="left">
                <div class="main-title">{{ item.title }}</div>
                <div class="sub-title">{{ item.intro }}
                </div>
              </div>
              <div class="icon">
                <img :src="item.icon" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ht-product-detail-item ht-product-detail-part2">
        <div style="height: 1rem"></div>
        <div class="title" v-aos="['animate__fadeInUp']" data-aos-delay="0.1s" data-aos-duration="0.8s">智能应用</div>
        <div class="intro" v-aos="['animate__fadeInUp']" data-aos-delay="0.4s" data-aos-duration="0.8s">
          <Swiper :slides-per-view="3" v-if="productDetailPage.productApplyList.length>3" space-between="0.57rem">
            <SwiperSlide v-for="(item,index) in productDetailPage.productApplyList" :key="item.id">
              <div class="intro-item">
                <div class="title-c">
                  <span class="index">{{ (index + 1) > 9 ? index + 1 : '0' + (index + 1) }}</span>
                  <span class="txt">{{ item.title }}</span>
                </div>
                <div class="desc">
                  {{ item.intro }}
                </div>
              </div>
            </SwiperSlide>
            <div class="pd-swiper-nav">
              <SwiperControl/>
            </div>
          </Swiper>
          <template v-else>
            <div class="intro-item" v-for="(item,index) in productDetailPage.productApplyList" :key="item.id">
              <div class="title-c">
                <span class="index">{{ (index + 1) > 9 ? index + 1 : '0' + (index + 1) }}</span>
                <span class="txt">{{ item.title }}</span>
              </div>
              <div class="desc">
                {{ item.intro }}
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="ht-product-detail-item ht-product-detail-part3">
        <div class="top-title" v-show="productDetailPage.other">满足企业全场景沟通需求</div>
        <div class="part3-html" v-html="productDetailPage.other"></div>
      </div>
      <div class="ht-product-detail-item ht-product-detail-part4">
        <div class="top-title">产品优势</div>
        <div class="part4-cards" v-aos="['animate__fadeInUp']" data-aos-delay="0.1s" data-aos-duration="0.6s">
          <Swiper :slides-per-view="4" v-if="productDetailPage.productApplyList.length>3" space-between="15">
            <SwiperSlide v-for="(item,index) in productDetailPage['productSuperiorityList']" :key="index">
              <div class="card-item">
                <div class="card-top-title">{{ item.title }}
                </div>
                <div class="line"></div>
                <div class="desc">
                  {{ item['intro'] }}
                </div>
              </div>
            </SwiperSlide>
            <div class="pd-swiper-nav">
              <SwiperControl/>
            </div>
          </Swiper>
          <template v-else>
            <div class="card-item normal-card"
                 v-for="(item,index) in productDetailPage['productSuperiorityList']" :key="index"
                 v-aos="['animate__fadeInUp']" :data-aos-delay="`${index*0.2}s`" data-aos-duration="1s">
              <div class="card-top-title">{{ item.title }}
              </div>
              <div class="line"></div>
              <div class="desc">
                {{ item['intro'] }}
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="ht-product-detail-bottom">
        <div class="title">立即选择华途电子文件安全管理系统</div>
        <div class="subtitle">适用于500强企业、央企、上市公司以及各行业客户</div>
        <NuxtLink to="/about/contact" target="_blank">
          <LearnMore class="detail-lear-more" label="联系我们"/>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ht-product-detail {
  //position: relative;
  &-top {
    padding-top: 0.1px;
    width: 24rem;
    height: 10.5rem;
    background-repeat: no-repeat;
    background-size: 24rem 10.5rem;
    color: #FFFFFF;
    text-align: center;

    .title {
      margin-top: 4.38rem;
      font-size: 0.8rem;
      font-weight: bold;
    }

    .subtitle {
      margin-top: 0.06rem;
      font-size: 0.33rem;
      font-weight: 400;
    }
  }

  &-tab {
    position: sticky;
    top: 0rem;
    color: #fff;
    font-size: 0.5rem;
    display: flex;
    margin-left: 1.7rem;
    margin-top: -0.9rem;
    z-index: 9;
    box-shadow: 0rem 0rem 0.23rem 0.01rem rgba(46, 106, 255, 0.1);

    .tab-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      width: 5rem;
      height: 1.75rem;
      line-height: 1.75rem;
      padding-left: 0.38rem;
      padding-right: 0.45rem;
      border-right: 0.01rem solid #E9E9E9;
      cursor: pointer;

      &:first-child {
        border-radius: 0.08rem 0rem 0rem 0.06rem;
      }

      &:last-child {
        border: none;
        border-radius: 0rem 0.08rem 0.08rem 0rem;
      }

      &.active {
        background-image: url(~/assets/images/product/detail/tab-active-bg.png);
        background-size: 5.24rem 2.5rem;
        background-repeat: no-repeat;

        span {
          color: #fff;
        }

        img {
          &.selected {
            display: block;
          }

          &.normal {
            display: none;
          }
        }
      }

      span {
        font-size: 0.35rem;
        font-weight: 400;
        color: #666666;
      }

      img {
        width: 0.43rem;
        height: 0.43rem;

        &.selected {
          display: none;
        }
      }


    }
  }

  &-box {
    width: 24rem;
    //height: 16.98rem;
    background: #F5F7FA;
    padding-top: 0.9rem;
    margin-top: -0.9rem;

    .ht-product-detail-part1 {
      //height: 13.5rem;
      margin-left: 1.27rem;
      margin-top: 2.4rem;
      display: flex;
      position: relative;

      .part1-image {
        position: sticky;
        top: 3rem;
        height: 5.31rem;

        img {
          width: 8.262rem;
          height: 4.779rem;
        }
      }

      .part1-content {
        width: 12.19rem;
        color: #111;

        .describes {
          margin-left: 1rem;

          .title {
            font-size: 0.5rem;

            span {
              &.sub {
                font-size: 0.4rem;
              }
            }
          }

          .description {
            margin-top: 0.57rem;
            font-size: 0.25rem;
            font-weight: 400;
            line-height: 0.55rem;
          }
        }

        .list {
          margin-left: 0.96rem;
          margin-top: 1rem;

          .item {
            width: 11.19rem;
            height: 2.6rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 0.01rem solid #DFDFDF;

            .left {
              color: #111111;
              width: 5.79rem;
              margin-left: 0.69rem;

              .main-title {
                font-size: 0.33rem;
                font-weight: 500;
              }

              .sub-title {
                margin-top: 0.2rem;
                font-size: 0.23rem;
                font-weight: 500;
                color: #999999;
                text-overflow: ellipsis; // 溢出用省略号显示
                overflow: hidden; // 超出的文本隐藏
                display: -webkit-box; // 作为弹性伸缩盒子模型显示
                -webkit-line-clamp: 2; // 显示的行
                -webkit-box-orient: vertical;
              }
            }

            .icon {
              img {
                width: 0.94rem;
                height: 0.94rem;
              }

              margin-right: 0.69rem;
            }

            &:hover {
              background: #FFFFFF;
              border: none;
              border-radius: 0.13rem 0.13rem 0.13rem 0.13rem;
            }
          }
        }
      }
    }

    .ht-product-detail-part2 {
      padding-top: 2rem;

      > .title {
        text-align: center;
        font-size: 0.57rem;
        font-weight: bold;
        margin-bottom: 1.01rem;
      }

      .intro {
        margin-left: 0.81rem;
        display: flex;
        padding-bottom: 2rem;
        position: relative;

        &-item {
          width: 7.08rem;
          height: 5.35rem;
          background: #FFFFFF;
          border-radius: 0.13rem;
          margin-right: 0.57rem;

          &:last-child {
            margin-right: 0;
          }

          &:hover {
            box-shadow: 0rem 0.04rem 0.33rem 0.01rem rgba(46, 106, 255, 0.11);
          }

          .title-c {
            width: 7.08rem;
            height: 1.46rem;
            background: #FFFFFF;
            box-shadow: 0rem 0rem 0.23rem 0.01rem rgba(46, 106, 255, 0.08);
            border-radius: 0.13rem 0.13rem 0rem 0rem;
            display: flex;
            align-items: center;
            justify-content: center;

            .index {
              width: 0.69rem;
              height: 0.69rem;
              text-align: center;
              line-height: 0.69rem;
              border: 0.035rem solid #111111;
              border-radius: 1rem;
              font-size: 0.28rem;
              font-weight: bold;
              color: #2E6AFF;
            }

            .txt {
              margin-left: 0.38rem;
              font-size: 0.33rem;
              font-weight: 500;
              color: #111111;
            }
          }

          .desc {
            margin: auto;
            margin-top: 0.56rem;
            width: 5.78rem;
            height: 2.34rem;
            font-size: 0.23rem;
            font-weight: 500;
            color: #666666;
            line-height: 0.45rem;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              display: none;
            }
          }
        }

        ::v-deep(.swiper) {
          position: unset;
        }

        .pd-swiper-nav {
          position: absolute;
          bottom: 0.7rem;
          left: -1rem;
          right: 0;
          margin: auto;
        }
      }
    }

    .ht-product-detail-part3 {
      background: #fff;
      padding-top: 2.1rem;

      .top-title {
        text-align: center;
        font-size: 0.57rem;
        font-weight: bold;
        color: #111111;
      }

      .part3-html {
        width: 22.675rem;
        margin: auto;
        display: block;
        :deep(img){
          width: 100%;
        }
      }
    }

    .ht-product-detail-part4 {
      background: #fff;
      padding-top: 0.58rem;

      .top-title {
        text-align: center;
        font-size: 0.57rem;
        font-weight: bold;
        color: #111111;
      }

      .part4-cards {
        //padding-right: 1rem;
        margin-top: 1rem;
        display: flex;
        padding-bottom: 2rem;
        position: relative;

        .normal-card {
          &:first-child {
            margin-left: 0.81rem;
          }
        }

        ::v-deep(.swiper) {
          position: unset;
          padding-left: 0.8rem;
          padding-right: 0.8rem;

          .swiper-wrapper {
            padding: 0.5rem 0;
          }
        }

        .pd-swiper-nav {
          position: absolute;
          bottom: 0.7rem;
          left: -1rem;
          right: 0;
          margin: auto;
        }

        .card-item {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          width: 5.25rem;
          height: 6.14rem;
          background: #FFFFFF url(~/assets/images/product/detail/adv-bg.png) no-repeat center bottom;
          background-size: 5.25rem 6.14rem;
          box-shadow: 0rem 0.04rem 0.29rem 0.01rem rgba(46, 106, 255, 0.1);
          border-radius: 0.19rem;
          padding-top: 0.1px;
          margin-right: 0.46rem;
          transition: 0.3s linear;

          &:hover {
            transform: scale(1.05);
          }

          &:last-child {
            margin-right: 0;
          }

          .card-top-title {
            margin-top: 0.78rem;
            text-align: center;
            font-size: 0.3rem;
            font-weight: bold;
            color: #111111;
          }

          .line {
            margin-top: 0.28rem;
            width: 0.46rem;
            border: 0.04rem solid #2E6AFF;;
          }

          .desc {
            width: 3.9rem;
            height: 3.7rem;
            font-size: 0.2rem;
            font-weight: 400;
            color: #666666;
            line-height: 0.4rem;
            margin-top: 0.46rem;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              display: none;
            }
          }
        }
      }
    }

    .ht-product-detail-bottom {
      width: 24rem;
      height: 6.21rem;
      background: #fff url(~/assets/images/product/detail/bottom-bg.png) no-repeat;
      background-size: 24rem 6.21rem;
      text-align: center;
      color: #111111;
      padding-top: 0.99rem;

      .title {
        font-size: 0.57rem;
        font-weight: bold;
      }

      .subtitle {
        font-size: 0.33rem;
        font-weight: 400;
        margin-top: 0.18rem;
      }

      .detail-lear-more {
        margin-top: 0.79rem;
        margin-left: 10.8rem;
      }
    }

  }

}
</style>
